<template>
	<view v-if="showAdv">
		<view v-if="pageData.start_ad_show" class="page_adv" @touchmove.stop.prevent="moveHandle">
			<view class="img">
				<!-- <image :src="pageData.start_ad_image" mode="scaleToFill"></image> -->
				<div class="bg_box" :style="{'background':' url('+pageData.start_ad_image+') no-repeat center center','background-size':'cover'}"></div>
			</view>
			<view class="end_btn" v-show="time>=0">
				<button @click="nextPage">跳过&nbsp;{{time}}s</button>
			</view>
		</view>
		<view v-if="pageData.start_ad_show==false && pageData.popup_ad_show" class="page_adv">
			<view class="top_img">
				<image :src="pageData.popup_ad_image" mode="widthFix"></image>
				<image src="@/static/guess/close.png" @click="closePop"></image>
			</view>

		</view>
	</view>
</template>

<script>
	import {formatTime} from '@/until/tool'
	export default {
		props: {
			data: {
				require: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			showAdv() {
				if (this.pageData == null) return false
				let { start_ad_show, popup_ad_show, start_ad_interval } = this.pageData
				let oncePop = uni.getStorageSync('oncePop') || null
				let nowPopTime = formatTime(new Date(),"YYYYMMDD")
				let nowTime = Math.floor(new Date() / 1000)
				let time = uni.getStorageSync('advTime') || null
				if (start_ad_show==true) {
					if (time == null || time < nowTime) {
						uni.setStorageSync('advTime', nowTime + (start_ad_interval*60))
						return true
					}else if(popup_ad_show==true){
						this.nextPage()
						if (oncePop==null || oncePop<nowPopTime) {
							uni.setStorageSync('oncePop',nowPopTime)
							return true
						}
						return false
					}
				}else if(popup_ad_show==true){
					if (oncePop==null || oncePop<nowPopTime) {
						uni.setStorageSync('oncePop',nowPopTime)
						return true
					}
					return false
				}
				return false
			},
		},
		data() {
			return {
				time: 0,
				pageData: null
			}
		},
		methods: {
			moveHandle() {},
			showBtn() {
				let _this = this
				_this.time = _this.pageData.start_ad_during
				let timer = setInterval(() => {
					_this.time--
					if (_this.time < 0) {
						clearInterval(timer)
						_this.nextPage()
					}
				}, 1000)
			},
			nextPage() {
				this.pageData.start_ad_show = false
			},
			closePop() {
				this.pageData.popup_ad_show = false
			}
		},
		mounted() {
		},
		created() {
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					if (this.pageData == null || !this.pageData.hasOwnProperty('start_ad_show')) {
						this.pageData = newVal
						let nowTime = Math.floor(new Date() / 1000)
						let time = uni.getStorageSync('advTime') || null
						if (this.pageData.start_ad_show  && (time == null || time < nowTime)) {
							this.showBtn()
						}
					}
				},
				deep: true,
				immediate:true
			},
		}
	}
</script>

<style scoped lang="scss">
	.page_adv {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .7);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.img {
		width: 100%;
		height: 100vh;
		line-height: 0;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			min-height: 100vh;
		}
		.bg_box{
			width: 100%;
			height: 100%;
		}
		
	}

	.end_btn {
		position: absolute;
		top: 40rpx;
		right: 40rpx;

		button {
			width: 210rpx;
			height: 90rpx;
			background: #000000;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 0.5;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-indent: 1rpx;
		}
	}

	.top_img {
		width: 550rpx;
		line-height: 0;
		position: absolute;
		left: 50%;
		top: 50%;
		// margin: -450rpx 0 0 -275rpx;
		transform: translate(-50%,-50%);
		text-align: center;
		line-height: 0;

		image {
			&:first-child {
				width: 550rpx;
				max-height: 80vh;
				// background-color: rgba(255, 255, 255, .1);
			}

			&:nth-child(2) {
				width: 70rpx;
				height: 70rpx;
				margin-top: 90rpx;
			}
		}
	}
</style>
